<template>
  <el-dialog
    :visible.sync="drawer"
    direction="rtl"
    width="50%"
    center
    :before-close="handleClose"
    class="dialogClass"
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <!-- 修改 -->
    <div class="descriptionsContainer">
      <div class="pageHeader">申请人信息</div>
      <el-form
        ref="form1"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="80px"
      >
      <el-row :gutter="30" class="row">
        <el-col :span="12">
            <el-form-item label="申请人姓名" prop="applicationName">
              <el-input
                v-model="formData.applicationName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人身份证号" prop="applicationZjh">
              <el-input
                v-model="formData.applicationZjh"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人联系电话" prop="applicationTel">
              <el-input
                v-model="formData.applicationTel"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="与涉案人关系" prop="applicationRelation">
              <el-select
                v-model="formData.applicationRelation"
                placeholder="请选择与涉案人关系"
                :disabled="type == 'edit'"
              >
                <el-option
                  v-for="dict in dict.type.relation_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="descriptionsContainer">
      <div class="pageHeader">涉案人员信息</div>
      <el-form
        ref="form1"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="80px"
      >
        <el-row :gutter="30" class="row">
          <el-col :span="10">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入姓名"
                maxlength="20"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="12">
            <el-form-item label="身份证号" prop="zjh">
              <el-input
                v-model="formData.zjh"
                placeholder="请输入证件号"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系电话" prop="tel">
              <el-input
                v-model="formData.tel"
                maxlength="11"
                placeholder="请输入联系电话"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :offset="2" :span="12">
            <el-form-item label="户籍地址" prop="residenceAddress">
              <el-input
                v-model="formData.residenceAddress"
                placeholder="请输入户籍地址"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" class="row"> </el-row>
        <el-row :gutter="30" class="row">
          <el-col :span="24">
            <el-form-item label="所属区域" prop="oucodeList">
              <div class="address">
                <DictionarySelect
                  source="xzqhbm"
                  style="width: 50%"
                  v-model="formData.oucodeList[0]"
                />
                <DictionarySelect
                  :source="formData.oucodeList[0]"
                  style="width: 50%; margin-left: 10px"
                  v-model="formData.oucodeList[1]"
                />
                <DictionarySelect
                  :source="formData.oucodeList[1]"
                  style="width: 50%; margin-left: 10px"
                  v-model="formData.oucodeList[2]"
                />
                <!-- <el-input
                v-model="formData.liveAddress"
                placeholder="请输入居住地址"
                clearable
              ></el-input> -->
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="具体地址" prop="liveAddress">
              <el-input
                v-model="formData.liveAddress"
                placeholder="请输入具体地址"
              ></el-input
            ></el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="具体地址" prop="address">
              <el-input
                v-model.trim="formData.address"
                placeholder="请输入涉案人具体地址"
                :maxlength="50"
                clearable
              >
              </el-input> -->
          <!-- <el-input
                v-model="formData.oucode"
                placeholder="请输入居住所属区域"
                clearable
              ></el-input> -->
          <!-- </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <div class="descriptionsContainer">
      <div class="pageHeader">案款发放信息</div>
      <el-form
        ref="form2"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="142px"
      >
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="案件名称" prop="caseId">
              <el-select
                :style="{ width: '100%' }"
                v-model="formData.caseId"
                placeholder="请选择案件名称"
              >
                <el-option
                  v-for="item in caseList"
                  :key="item.id"
                  :label="item.caseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                  v-model="formData.caseName"
                  placeholder="请输入案件名称"
                  clearable
                  :style="{ width: '38.5%' }"
                >
                </el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="判决损失金额(元)"
              prop="personJudgmentLossAmount"
            >
              <el-input
                v-model="formData.personJudgmentLossAmount"
                placeholder="请输入判决损失金额"
                clearable
                maxlength="15"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="认定发放金额(元)"
              prop="personConfirmedPaymentAmount"
            >
              <el-input
                v-model="formData.personConfirmedPaymentAmount"
                placeholder="请输入个人认定发放金额"
                clearable
                maxlength="15"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8"> -->
          <!-- <el-form-item label="应发金额(元)" prop="needMoney">
              <el-input
                v-model="formData.needMoney"
                placeholder="请输入应发金额(元)"
                clearable
                maxlength="10"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item> -->
          <!-- </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="合计发放金额(元)" prop="totalMoney">
              <el-input
                v-model="totalMoney"
                disabled
                oninput="value=value.replace(/[^0-9.]/g,'')"
                clearable
              ></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="合计发放比例" prop="totalProportion">
              <el-input v-model="totalProportion" disabled
                ><template slot="suffix">%</template></el-input
              >
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="首轮发放金额(元)" prop="firstPayMoney">
              <el-input
                v-model="formData.firstPayMoney"
                placeholder="请输入首轮发放金额"
                maxlength="15"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首轮发放账号" prop="firstPayNumber">
              <el-input
                v-model="formData.firstPayNumber"
                placeholder="请输入发放账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首轮发放方式" prop="firstPayWay">
              <el-select
                v-model="formData.firstPayWay"
                :style="{ width: '100%' }"
                placeholder="请选择发放方式"
              >
                <el-option
                  v-for="dict in dict.type.payment_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="formData.firstPayWay"
                placeholder="请输入发放方式"
                clearable
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首轮发放时间" prop="firstPayTime">
              <el-date-picker
                v-model="formData.firstPayTime"
                format="yyyy-MM-dd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择发放时间"
                :style="{ width: '100%' }"
                clearable
                :picker-options="setDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="首轮发放比例" prop="PayProportion">
              <el-input v-model="firstPayProportion" disabled
                ><template slot="suffix">%</template></el-input
              >
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="二轮发放金额(元)" prop="secondPayMoney">
              <el-input
                v-model.number="formData.secondPayMoney"
                placeholder="请输入二轮发放金额(元)"
                clearable
                maxlength="15"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二轮发放账号" prop="secondPayNumber">
              <el-input
                v-model="formData.secondPayNumber"
                placeholder="请输入发放账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="8">
            <el-form-item label="二轮发放比例" prop="secondPayProportion">
              <el-input v-model="secondPayProportion" disabled
                ><template slot="suffix">%</template></el-input
              >
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="二轮发放方式" prop="secondPayWay">
              <el-select
                v-model="formData.secondPayWay"
                placeholder="请选择发放方式"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.payment_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="二轮发放时间" prop="secondPayTime">
              <el-date-picker
                v-model="formData.secondPayTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择发放时间"
                clearable
                :picker-options="setDisabled"
                :style="{ width: '100%' }"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="三轮发放金额(元)" prop="thirdPayMoney">
              <el-input
                v-model="formData.thirdPayMoney"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入三轮发放金额(元)"
                clearable
                maxlength="15"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="三轮发放账号" prop="thirdPayNumber">
              <el-input
                v-model="formData.thirdPayNumber"
                placeholder="请输入发放账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="三轮发放方式" prop="thirdPayWay">
              <el-select
                v-model="formData.thirdPayWay"
                placeholder="请选择发放方式"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.payment_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="三轮发放时间" prop="thirdPayTime">
              <el-date-picker
                v-model="formData.thirdPayTime"
                format="yyyy-MM-dd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择发放时间"
                clearable
                :style="{ width: '100%' }"
                :picker-options="setDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button class="resetButton" @click="cancel"> 取消 </el-button>
        <el-button class="searchButton" @click="Submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getPayment,
  updatePayment,
  delPayment,
  editCheckMoney,
} from "@/api/paymentManage/payment";
import { listCase } from "@/api/caseManage/case";
import { MODALTYPE } from "../../../utils/variable.js";
import DictionarySelect from "../../../layout/components/dictionnary/DictionarySelect.vue";
export default {
  name: "PaymentDrawer",
  dicts: ["payment_way", "relation_type"],
  components: { DictionarySelect },
  data() {
    var checkFirst = (rule, value, callback) => {
      //如果填写了发放金额添加时间校验
      if (value != "" && value != null) {
        this.rules.firstPayTime.push({
          required: true,
          message: "请选择首轮发放时间",
        });
        this.rules.firstPayWay.push({
          required: true,
          message: "请选择首轮发放方式",
        });
        this.rules.firstPayNumber.push({
          required: true,
          message: "请选择首轮发放账号",
        });
      } else {
        this.rules.firstPayTime.pop();
        this.rules.firstPayWay.pop();
        this.rules.firstPayNumber.pop();
      }
      // if (Number(value) > Number(this.formData.personConfirmedPaymentAmount)) {
      //   callback(new Error("发放金额不能大于应发金额"));
      // }
      //  else {
      //   callback();
      // }
      //要加校验时把上面打开，下面语句删掉
      callback();
    };
    var checkSecond = (rule, value, callback) => {
      //如果填写了发放金额添加时间校验
      if (value != "" && value != null) {
        this.rules.secondPayTime.push({
          required: true,
          message: "请选择二轮发放时间",
        });
        this.rules.secondPayWay.push({
          required: true,
          message: "请选择二轮发放方式",
        });
        this.rules.secondPayNumber.push({
          required: true,
          message: "请选择二轮发放账号",
        });
      } else {
        this.rules.secondPayTime.pop();
        this.rules.secondPayWay.pop();
        this.rules.secondPayNumber.pop();
      }
      // if (
      //   Number(value) >
      //     Number(this.formData.personConfirmedPaymentAmount) -
      //       Number(this.formData.firstPayMoney) &&
      //   value != ""
      // ) {
      //   callback(new Error("当前总发放金额不能大于应发金额"));
      // } else {
      //   callback();
      // }
      //要加校验时把上面打开，下面语句删掉
      callback();
    };
    var checkTel = (rule, value, callback) => {
      let reg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    var checkThird = (rule, value, callback) => {
      //如果填写了发放金额添加时间校验
      if (value != "" && value != null) {
        this.rules.thirdPayTime.push({
          required: true,
          message: "请选择三轮发放时间",
        });
        this.rules.thirdPayWay.push({
          required: true,
          message: "请选择三轮发放方式",
        });
        this.rules.thirdPayNumber.push({
          required: true,
          message: "请选择三轮发放账号",
        });
      } else {
        this.rules.thirdPayTime.pop();
        this.rules.thirdPayWay.pop();
        this.rules.thirdPayNumber.pop();
      }
      // if (
      //   Number(value) >
      //     Number(this.formData.personConfirmedPaymentAmount) -
      //       Number(this.formData.firstPayMoney) -
      //       Number(this.formData.secondPayMoney) &&
      //   value != ""
      // ) {
      //   callback(new Error("当前总发放金额不能大于应发金额"));
      // } else {
      //   callback();
      // }
      //要加校验时把上面打开，下面语句删掉
      callback();
    };
    return {
      //日期范围限制
      setDisabled: {
        disabledDate(time) {
          // return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
          // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },
      //抽屉是否显示
      drawer: false,
      title: "",
      //案件列表
      caseList: [],
      rules: {
        liveAddress: [
          { required: true, message: "请输入具体地址", trigger: "blur" },
        ],
        oucodeList: [
          { required: true, message: "请选择所属区域", trigger: "blur" },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        zjh: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
          {
            pattern:
              /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: "身份证号格式错误",
            trigger: "blur",
          },
        ],
        // residenceAddress: [
        //   {
        //     required: true,
        //     message: "请输入户籍地址",
        //     trigger: "blur",
        //   },
        // ],
        // liveAddress: [
        //   {
        //     required: true,
        //     message: "请输入居住地址",
        //     trigger: "blur",
        //   },
        // ],
        caseId: [
          {
            required: true,
            message: "请选择案件名称",
            trigger: "blur",
          },
        ],
        personJudgmentLossAmount: [
          {
            required: true,
            message: "请输入判决损失金额",
            trigger: "blur",
          },
        ],
        personConfirmedPaymentAmount: [
          {
            required: true,
            message: "请输入个人认定发放金额",
            trigger: "blur",
          },
        ],
        // needMoney: [
        //   {
        //     required: true,
        //     validator: checkNeedMoney,
        //     trigger: "blur",
        //   },
        // ],
        paymentWay: [
          {
            required: true,
            message: "请输入发放方式",
            trigger: "blur",
          },
        ],
        paymentNumber: [
          {
            required: true,
            message: "请输入发放账号",
            trigger: "blur",
          },
        ],
        tel: [
          {
            validator: checkTel,
            trigger: "blur",
          },
        ],
        firstPayMoney: [
          {
            validator: checkFirst,
            trigger: "blur",
          },
        ],
        secondPayMoney: [
          {
            validator: checkSecond,
            trigger: "blur",
          },
        ],
        thirdPayMoney: [
          {
            validator: checkThird,
            trigger: "blur",
          },
        ],
        firstPayTime: [],
        firstPayWay: [],
        firstPayNumber: [],
        secondPayTime: [],
        secondPayWay: [],
        secondPayNumber: [],
        thirdPayTime: [],
        thirdPayWay: [],
        thirdPayNumber: [],
      },
      formData: {
        //姓名
        name: "",
        //身份证号
        zjh: "",
        //联系电话
        tel: "",
        //户籍地址
        residenceAddress: "",
        //居住地址
        liveAddress: "",
        //案件名称
        caseName: "",
        //案件id
        caseId: "",
        //个人判决损失金额
        personJudgmentLossAmount: "",
        //个人认定发放金额
        personConfirmedPaymentAmount: "",
        //应发金额
        // needMoney: "",
        //一轮发放方式
        firstPayWay: "",
        //一轮发放账号
        firstPayNumber: "",
        //二轮发放方式
        secondPayWay: "",
        //二轮发放账号
        secondPayNumber: "",
        //三轮发放方式
        thirdPayWay: "",
        //三轮发放账号
        thirdPayNumber: "",
        //首轮发放金额
        firstPayMoney: "",
        //首轮发放时间
        firstPayTime: "",
        //首轮发放比例
        firstPayProportion: "",
        //二轮发放金额
        secondPayMoney: "",
        //二轮发放时间
        secondPayTime: "",
        //二轮发放比例
        secondPayProportion: "",
        oucodeList: ["省", "市", "区县"],
        //三轮发放金额
        thirdPayMoney: "",
        //三轮发放时间
        thirdPayTime: "",
        //合计发放金额
        totalMoney: "",
        //合计发放比例
        totalProportion: "",
        applicationName: "",
        applicationTel: "",
        applicationZjh: "",
        applicationRelation: "",
      },
    };
  },
  props: ["type", "personId", "caseId"],
  methods: {
    // 表单重置
    reset() {
      this.formData = {
        //姓名
        name: "",
        //身份证号
        zjh: "",
        //联系电话
        tel: "",
        //户籍地址
        residenceAddress: "",
        //居住地址
        liveAddress: "",
        //案件名称
        caseName: "",
        //案件id
        caseId: "",
        //个人判决损失金额
        personJudgmentLossAmount: "",
        //个人认定发放金额
        personConfirmedPaymentAmount: "",
        //应发金额
        needMoney: "",
        //一轮发放方式
        firstPayWay: "",
        //一轮发放账号
        firstPayNumber: "",
        //二轮发放方式
        secondPayWay: "",
        //二轮发放账号
        secondPayNumber: "",
        //三轮发放方式
        thirdPayWay: "",
        //三轮发放账号
        thirdPayNumber: "",
        //首轮发放金额
        firstPayMoney: "",
        //首轮发放时间
        firstPayTime: "",
        oucodeList: ["省", "市", "区县"],
        //首轮发放比例
        firstPayProportion: "",
        //二轮发放金额
        secondPayMoney: "",
        //二轮发放时间
        secondPayTime: "",
        //二轮发放比例
        secondPayProportion: "",
        //三轮发放金额
        thirdPayMoney: "",
        //三轮发放时间
        thirdPayTime: "",
        //合计发放金额
        totalMoney: "",
        //合计发放比例
        totalProportion: "",
        totalProportion: "",
        applicationName: "",
        applicationTel: "",
        applicationZjh: "",
        applicationRelation: "",
      };
      this.resetForm("form1");
      this.resetForm("form2");
    },
    //关闭抽屉
    handleClose(done) {
      this.$emit("update:type", "");
      this.clearRules();
      done();
    },
    //取消
    cancel() {
      this.$emit("update:type", "");
      this.clearRules();
      this.drawer = false;
    },
    //清空时间校验规则
    clearRules() {
      this.rules.firstPayTime.pop();
      this.rules.secondPayTime.pop();
      this.rules.thirdPayTime.pop();
    },
    //提交
    Submit() {
      const formName = ["form1", "form2"];
      const validates = (item) => {
        return new Promise((resolve, reject) => {
          if (!this.$refs[item]) {
            resolve();
            return false;
          }
          this.$refs[item].validate((valid) => {
            if (valid) {
              resolve();
            } else {
              reject(new Error("请检查输入信息"));
            }
          });
        });
      };
      Promise.all(formName.map((item) => validates(item)))
        .then(() => {
          this.formData.firstPayProportion = this.firstPayProportion;
          this.formData.secondPayProportion = this.secondPayProportion;
          this.formData.totalProportion = this.totalProportion;
          this.formData.totalMoney = this.totalMoney;
          if (this.formData.firstPayMoney == "") {
            this.formData.firstPayTime = "";
            this.formData.firstPayWay = "";
            this.formData.firstPayNumber = "";
          }
          if (this.formData.secondPayMoney == "") {
            this.formData.secondPayTime = "";
            this.formData.secondPayWay = "";
            this.formData.secondPayNumber = "";
          }
          if (this.formData.thirdPayMoney == "") {
            this.formData.thirdPayTime = "";
            this.formData.thirdPayWay = "";
            this.formData.thirdPayNumber = "";
          }
          //如果更换了案件，则把原来案件的相关数据删除
          if (this.formData.caseId != this.caseId) {
            let caseIds = [this.caseId];
            let personIds = [this.personId];
            let params = {
              caseIds: caseIds,
              personIds: personIds,
            };
            delPayment(params);
          }
          updatePayment(this.formData)
            .then(() => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("getList");
              this.$emit("update:type", "");
              this.clearRules();
              this.drawer = false;
            })
            .catch(() => {
              this.$modal.msgError("修改失败");
            });
        })
        .catch(() => {});
    },
  },
  computed: {
    firstPayProportion() {
      return Number(this.formData.personJudgmentLossAmount) == 0
        ? 0:(
        (Number(this.formData.firstPayMoney) /
          Number(this.formData.personJudgmentLossAmount)) *
        100
      ).toFixed(11);
    },
    secondPayProportion() {
      return Number(this.formData.personJudgmentLossAmount) == 0
        ? 0
        : (
            (Number(this.formData.secondPayMoney) /
              Number(this.formData.personJudgmentLossAmount)) *
            100
          ).toFixed(11);
    },
    totalProportion() {
      return Number(this.formData.personJudgmentLossAmount) == 0
        ? 0
        :  (
            (Number(this.totalMoney) /
              Number(this.formData.personJudgmentLossAmount)) *
            100
          ).toFixed(11);
    },
    totalMoney() {
      return (
        Number(this.formData.firstPayMoney) +
        Number(this.formData.secondPayMoney) +
        Number(this.formData.thirdPayMoney)
      );
    },
    // isShow() {
    //   if (this.type == MODALTYPE["详情"]) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
    // buttonTitle() {
    //   if (this.type == MODALTYPE["详情"]) {
    //     return "关闭";
    //   } else {
    //     return "取消";
    //   }
    // },
  },
  watch: {
    type(val) {
      if (this.type == MODALTYPE["修改"]) {
        this.reset();
        this.title = "修改";
        let queryParm = {
          oucode: this.$store.state.user.oucode,
        };
        listCase(queryParm).then((res) => {
          this.caseList = res.rows;
        });
        let params = {
          caseId: this.caseId,
          personId: this.personId,
        };
        //请求后端拿到数据
        getPayment(params).then((response) => {
          this.formData = response;
          if (this.formData.oucodeList == null) {
            this.formData.oucodeList = ["省", "市", "区县"];
          }
          this.drawer = true;
        });
        this.drawer = true;
      }
      // else if (this.type == MODALTYPE["详情"]) {
      //   let params = {
      //     caseId: this.caseId,
      //     personId: this.personId,
      //   };
      //   getPayment(params).then((response) => {
      //     this.formData = response;
      //     this.title = "详情";
      //     this.drawer = true;
      //   });
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/variables.scss";
@import "../../../assets/styles/drawer.scss";
@import "../../../assets/styles/dialog.scss"; //模态框样式
::v-deep .el-descriptions-item__container {
  margin-left: 20px;
}
.address {
  display: flex;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
::v-deep.dialogClass .el-form-item {
  margin-bottom: 0px !important;
}
.dialogClass {
  ::v-deep .el-dialog {
    top: -50px;
  }
}

.descriptionsContainer {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20px;

  ::v-deep.row {
    margin-left: 35px !important;
  }

  ::v-deep .el-descriptions {
    margin-left: -20px;
  }

  ::v-deep .el-row {
    left: -15px !important;
  }

  //详情描述框
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5e5c5c !important;
    margin-top: 10px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5e5c5c;
  }
}

.descriptions {
  padding-bottom: 20px;

  ::v-deep.row {
    margin-left: 35px !important;
  }

  ::v-deep .el-descriptions {
    margin-left: 5px;
  }

  ::v-deep .el-row {
    left: -15px !important;
  }

  //详情描述框
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5e5c5c !important;
    margin-top: 30px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5e5c5c;
  }
}

.footButton {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;

  .searchButton {
    width: 73px;
    border: 0px;
    height: 32px;
    background: $form-button-background-color;
    border-radius: 3px;
    font-size: $form-button-font-size;
    margin-right: 10px;
    font-family: $font-family;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #fefbfb;
    line-height: 10px;
    letter-spacing: 2px;
  }

  //重置按钮
  .resetButton {
    border: 1px solid #2985f7;
    border-radius: 2px;
    height: 32px;
    background: #fff;
    font-size: $form-button-font-size;
    font-family: $font-family;
    line-height: 9px;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #598af9;
    letter-spacing: 2px;
  }
}
</style>>